<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Yu-Jie Lin</title>
  <!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="http://lilbtn.appspot.com/itchape/itchape.js"></script>
<script>
$(function (){
  get_itch('b01faf150a4bb359', 'itch');
  if (window.location.href.indexOf('localhost') >= 0)
    return;

  if (!$.browser.msie)
    $('title').text('yjl.im');
  $('#title').text('yjl.im');
  
  $('#bio').hide();
  $('section > section').hide();
  $('footer').hide();

  $('#title').mousemove(start_animation);
  });

function start_animation(){

  $('#title').unbind('mousemove', start_animation);

  function chg(text){
    $('#title')
      .queue(function(){
        if (!$.browser.msie)
          $('title').text(text);
        $('#title').text(text);
        $(this).dequeue();
        })
      .delay(100)
      ;
    }
  function chg_color(color){
    $('#title')
      .queue(function(){
        $('#title').css({
          'color': color
          });
        $(this).dequeue();
        })
      .delay(100)
      ;
    }

  $('#title').delay(1000);

  chg('yj.lim');
  chg('y.jlim');
  chg('.yjlim');
  chg('.yjilm');
  chg('.yijlm');
  chg('.iyjlm');
  chg('i.yjlm');
  chg('i.yjml');
  chg('i.ymjl');
  chg('i.myjl');
  chg('i.m yjl');
  chg('i.m yujl');
  chg('i.m yu-jl');
  chg('i.m yu-jil');
  chg('i.m yu-jiel');
  chg('i.m yu-jie l');
  chg('i.m yu-jie li');
  chg('i.m yu-jie lin');
  chg('I.m yu-jie lin');
  chg("I'm yu-jie lin");
  chg("I'm Yu-jie lin");
  chg("I'm Yu-Jie lin");
  chg("I'm Yu-Jie Lin");
  
  $('#title').delay(1000);
  
  chg("I'mYu-Jie Lin");
  chg("I'Yu-Jie Lin");
  chg("IYu-Jie Lin");
  chg("Yu-Jie Lin");
  
  $('#title').delay(1000);

  chg_color('#999')
  chg_color('#888')
  chg_color('#777')
  chg_color('#666')

  $('#title').delay(1000);

  $.each(['#bio', '#blog', '#more', '#itchape', 'footer'], function(idx, sel) {
      $('#title')
          .queue(function(){
              $(sel).fadeTo('slow', 1);
              $(this).dequeue();
              })
          .delay(1000)
          ;
      });
  }
</script>
<link href='font/stylesheet.css' rel='stylesheet' type='text/css'/> 
<style>
body {background-color: #242424; color: #aaa; padding: 1ex; cursor: default;}
a {color: #666; text-decoration: none; -webkit-transition-property: color; -webkit-transition-duration: 0.2s; -moz-transition-property: color; -moz-transition-duration: 0.2s;}
a:visited {color: #666;}
a:hover {color: #fff; text-shadow: #fff 0 0 2px;}

#title {font-family: "Moms Typewriter", "Palatino Linotype", "Book Antiqua", Palatino; font-size: 4em; margin: 0; text-shadow: #000 1px 1px 3px;}
#bio {font-family: "Existence", "Trebuchet MS", Helvetica; text-shadow: #000 1px 1px 0}
footer {font-family: "Existence", "Trebuchet MS", Helvetica}

#blog h1, #more h1, #itchape {font-family: "Prociono", "Lucida Sans Unicode", "Lucida Grande"}

section ul {list-style-type: none; padding-left: 0;}

section li {
  font-family: "Envy Code R", "Courier New", Courier, monospace; font-size: 2em;
  display: inline-block; *display:inline;
  margin-left: 1ex;
  }
section li:first-child {margin-left: 0;}

section li a {
  background-color: #aaa;
  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
  box-shadow: #aaa 0 0 5px; -moz-box-shadow: #aaa 0 0 5px; -webkit-box-shadow: #aaa 0 0 5px;
  text-shadow: #222 0 0 2px;
  display: block;
  line-height: 48px;
  padding: 0 1ex;
  }

header, section, footer {display: block; margin: auto auto; width: 700px;}
#title, section, footer {text-align: center;}
</style>
</head>
<body>
<section itemscope itemtype="http://data-vocabulary.org/Person">
  <header>
    <hgroup>
      <h1 itemprop="name" id="title">Yu-Jie Lin</h1>
      <h2 id="bio"><span itemprop="role"><span title="01001101000I1011">Lazy</span> coder</span>, <a href="http://en.wikipedia.org/wiki/STS-1">$age_needs_calculation</a>, <span title="8====D (NSFW!)">&#9794;</span>, <span itemprop="address" itemscope itemtype="http://data-vocabulary.org/Address"><span itemprop="country-name">Taiwan</span></span>ese, Daily <span title="Where is Taylor, the Caramel Macchiato girl?">C8H10N4O2</span> fix user, Temporary <span title="S">Barrel</span> for Beer, <span title="Many years to be such master, it's not easy!">Master of Idling</span>, <span itemprop="title"><span title="Hate this prefix">Un</span>professional Blogger</span>, and <span title="You can let your mouse to rest, no more, really.">more</span> unlisted.</h2>
    </hgroup>
  </header>

  <section id="blog">
  <h1>Booooolog?</h1>
  <ul>
    <li><a itemprop="url" href="http://blog.yjl.im/">YJL --verbose</a></li>
  </ul>
  </section>

  <section id="more">
  <h1>More about me?</h1>
  <ul>
    <li><a itemprop="url" href="http://j.mp/Google-livibetter">Stalking Me!</a></li>
  </ul>
  </section>

  <section id="itchape">
  <h1>My ItchApe</h1>
  <span id="itch"></span>
  </section>
</section>

<footer>
  <p class="credit">Webfonts: <a href="http://yeah-noah.kernest.com/fonts">Existence</a>, <a href="http://damieng.com/envy-code-r">Envy Code R</a>, <a href="http://users.cuci.nl/nonsuch/free.htm">Moms Typewriter</a>, and <a href="http://www.theleagueofmoveabletype.com/fonts/13-prociono">Prociono</a></p>
  <p class="copyright">© 2010, 2011 Yu-Jie Lin</p>
</footer>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-15896368-2");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>
<!-- vim: set sw=2 ts=2 et ai: -->
